<!--  -->
<script setup lang='ts'>
import gsap from 'gsap';
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

// 枪支运动动画
function pistolAn() {
    gsap.timeline({
        scrollTrigger: {
            // pinSpacing: true,
            pin: true,
            markers: false,
            trigger: ".firearm",
            start: "top top",
            end: "+=500",
            scrub: 1,
        }
    })
        .to(".slide", { x: 0, y: 100 }, 0)
        .to(".barrel", { x: -34, y: -8 }, 0)
        .to(".spring", { x: 0, y: -89 }, 0)
        .to(".base", { x: 2, y: -234 }, 0)
        .from(".firearmDetails", { opacity: 0, x: 100 }, 0)
}

defineExpose({
    pistolAn
})
</script>
<template>
    <div class="firearm">
        <img src="https://assets.codepen.io/16327/teardown-slide.png" class="slide piece" alt="slide">
        <img src="https://assets.codepen.io/16327/teardown-barrel.png" class="barrel piece" alt="barrel">
        <img src="https://assets.codepen.io/16327/teardown-spring.png" class="spring piece" alt="spring">
        <img src="https://assets.codepen.io/16327/teardown-base.png" class="base piece" alt="base">
        <div class="firearmDetails">
            <h2>手枪</h2>
            <p>
                手枪是一种单手握持瞄准射击或本能射击的短枪管武器，通常为指挥员和特种兵随身携带，用在50米近程内自卫和突然袭击敌人。现代手枪的基本特点是：变换保险、枪弹上膛、更换弹匣方便，结构紧凑，自动方式简单。
                现代军用手枪主要有自卫手枪和冲锋手枪。自卫手枪射程一般为50米，弹匣容量8~15发，发射方式为单发，重量在1公斤左右。冲锋手枪亦叫战斗手枪，全自动，一般配有分离式枪托，弹匣容量10~20发，平时可当冲锋枪使用，有效射程可达100~150米。现代手枪主要有左轮手枪、自动手枪（实际是半自动手枪）、全自动手枪三种类型。
            </p>
        </div>
    </div>
</template>

<style lang='scss' scoped>
.firearm {
    width: 100%;
    height: 120vh;
    position: relative;

    img {
        position: absolute;
        left: 100px;
        transform: scale(0.6);
    }

    .firearmDetails {
        position: absolute;
        top: 91px;
        right: 50px;
        width: 35%;
        height: 80vh;
        background-color: rgb(150, 150, 150);
        box-shadow: 0px 0px 10px 10px rgb(150, 150, 150);
        color: white;
        padding: 10px;

        p {
            font-size: 16px;
            line-height: 32px;
            text-indent: 2em;
        }
    }

    .slide {
        z-index: 3;
        top: 0px;
        left: -200px;
    }

    .barrel {
        z-index: 1;
        top: 200px;
        left: -50px;

    }

    .spring {
        z-index: 2;
        top: 300px;
        left: -50px;
    }

    .base {
        z-index: 3;
        top: 300px;
        left: -200px;
    }
}
</style>